﻿.imagesSample .picture {
    width: 200px;
    height: 200px;
    background-size: cover;
}

    .imagesSample .picture.small {
        width: 100px;
        height: 100px;
    }

    .imagesSample .picture.animate {
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        -webkit-transition: all 1s ease-out;
        transition: all 1s ease-out;
        opacity: 0;
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

        /* 
    the imageLoaded class is added by the binding once image is ready
    it enables animating the image apperance
*/
        .imagesSample .picture.animate.imageLoaded {
            opacity: 1;
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1);
        }
